<template>
  	<section class="main">
		
		<div class="container">
			<span>{{ $t('i18n.tips') }}</span>
			<el-button
				type="primary"
				@click="$i18n.locale = $i18n.locale === 'zh-cn'?'en':'zh-cn';"
			>
				{{ $t('i18n.btn') }}
			</el-button>
			<div class="list">
				<h2>{{ $t('i18n.title1') }}</h2>
				<p>{{ $t('i18n.p1') }}</p>
				<p>{{ $t('i18n.p2') }}</p>
				<p>{{ $t('i18n.p3') }}</p>
			</div>
		</div>
	</section>
</template>

<script setup>
import { useI18n } from "vue-i18n";

console.log(useI18n());
</script>

<style lang="scss" scoped>
.list {
    padding: 30px 0;
}
.list p {
    margin-bottom: 20px;
}
</style>